<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>队列</title>
</head>

<body>
	<script>
		class Queue {
			constructor() {
				this.count = 0
				this.lowestCount = 0
				this.items = {}
			}
			enQueue (item) {
				this.items[this.count] = item
				this.count++
			}
			deQueue () {
				if (this.isEmpty()) {
					return undefined
				}
				let result = this.items[this.lowestCount]
				delete this.items[this.lowestCount]
				this.lowestCount++
				return result
			}
			peek () {
				if (this.isEmpty()) {
					return undefined
				}
				return this.items[this.lowestCount]
			}
			isEmpty () {
				return this.count === this.lowestCount
			}
			size () {
				return this.count - this.lowestCount
			}
			clear () {
				while (this.count - this.lowestCount > 0) {
					this.deQueue()
				}
				this.lowestCount = 0
				this.count = 0
			}
		}
		function hotpotato (elementsList, num) {
			const queue = new Queue()
			const elimatateList = []
			for (let i = 0; i < elementsList.length; i++) {
				queue.enQueue(elementsList[i])
			}
			while (queue.size() > 1) {
				debugger
				for (let i = 0; i < num; i++) {
					queue.enQueue(queue.deQueue())
				}
				elementsList.push(queue.deQueue())
			}
			return {
				elementsList,
				winner: queue.deQueue()
			}
		}
		const fronts = ['html', 'css', 'javascript', 'vue']
		const result = hotpotato(fronts, 3)
	</script>
</body>
</html>
